<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="tableFrom.type" @tab-click="getList(1), getLstFilterApi()">
          <el-tab-pane
            v-for="(item, index) in headeNum"
            :key="index"
            :name="item.type.toString()"
            :label="item.name + '(' + item.count + ')'"
          />
        </el-tabs>
        <div class="container">
          <el-form size="small" label-width="120px" :inline="true">
            <el-form-item label="服务分类：">
              <el-select
                v-model="tableFrom.category_id"
                placeholder="请选择"
                class="filter-item selWidth"
                clearable
                @change="getList(1)"
              >
                <el-option
                  v-for="item in categoryList.list"
                  :key="item.industry_id"
                  :label="item.industry_name"
                  :value="item.industry_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="服务状态：">
              <el-select
                v-model="tableFrom.status"
                placeholder="请选择"
                class="filter-item selWidth"
                clearable
                @change="getList"
              >
                <el-option
                  v-for="item in serviceStatusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <router-link :to="{ path: `${roterPre}` + '/reservation/service/addService' }">
          <el-button size="small" type="primary">添加服务</el-button>
        </router-link>
        <el-button
          size="mini"
          :disabled="tableFrom.type == 3 || multipleSelection.length == 0"
          @click="batchOff"
        >批量下架</el-button>
        <el-button
          size="mini"
          :disabled="tableFrom.type != 3 && tableFrom.type != 1 || multipleSelection.length == 0"
          @click="batchShelf"
        >批量上架</el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        :row-class-name="tableRowClassName"
        :row-key="(row) => { return row.id }"
        @selection-change="handleSelectionChange"
        @rowclick.stop="closeEdit"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55" />
        <el-table-column prop="id" label="ID" min-width="50" />
        <el-table-column label="服务图" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image :src="scope.row.image" :preview-src-list="[scope.row.image]" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="服务名称" min-width="200" />
        <el-table-column prop="price" label="售价" min-width="90" />
        <el-table-column prop="old_price" label="原价" min-width="90" />
        <el-table-column prop="sort" align="center" label="排序" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row['sort'] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="服务状态" min-width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="150" />
        <el-table-column label="操作" min-width="150" fixed="right">
          <template slot-scope="scope">
            <router-link
              :to="{ path: roterPre + '/reservation/service/addService/' + scope.row.id }"
            >
              <el-button type="text" size="small" class="mr10">编辑</el-button>
            </router-link>
            <el-button
              v-if="tableFrom.type === '4'"
              type="text"
              size="small"
              @click="handleRestore(scope.row.id)"
            >恢复服务</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.id, scope.$index)"
            >{{ tableFrom.type === '4' ? '删除' :
              '加入回收站' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  serviceLstApi,
  serviceDeleteApi,
  categoryListApi,
  lstFilterApi,
  destoryApi,
  restoreApi,
  batchesOnOffApi
} from '@/api/reservationService'
import { roterPre } from '@/settings'
export default {
  name: 'ServiceList',
  components: {},
  data() {
    return {
      props: {
        emitPath: false
      },
      roterPre: roterPre,
      headeNum: [],
      labelList: [],
      tempList: [],
      listLoading: true,
      tableData: {
        data: [],
        total: 0
      },
      tableFrom: {
        page: 1,
        limit: 20,
        category_id: '',
        status: '',
        id: this.$route.query.id ? this.$route.query.id : '',
        type: '1'
      },
      categoryList: [], // 服务分类
      modals: false,
      tabClickIndex: '',
      multipleSelection: [],
      serviceStatusList: [
        { label: '上架', value: 1 },
        { label: '下架', value: 0 }
      ],
      id: '',
      is_audit: false,
      isBatch: false,
      searchForm: {
        name: ''
      },
      tableData1: {
        gridData: [],
        total: 5
      },
      tableFrom1: {
        mer_id: 0,
        page: 1,
        limit: 20,
        category_id: '',
        status: '',
        id: this.$route.query.id ? this.$route.query.id : ''
      },
      dialogTableVisible: false,
      merchantLists: [],
      merchantId: []
    }
  },
  mounted() {
    this.getLstFilterApi()
    // this.getCategorySelect()
    this.getCategoryList()
    this.getList(1)
    // this.getLabelLst()
    // this.getTempLst()
    // this.productCon()
  },
  methods: {
    // 关闭弹窗
    closeMerchant() {
      this.showProduct = false
    },

    // 列表
    getxplList(num) {
      this.listLoading = true
      this.tableFrom1.page = num || this.tableFrom1.page
      serviceLstApi(this.tableFrom1)
        .then(res => {
          this.tableData1.gridData = res.data.list
          this.tableData1.total = res.data.count
          this.listLoading = false
        })
        .catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
        })
    },
    // 搜索
    searchList() {
      console.log(this.tableFrom1)
      this.tableFrom1.page = 1
      this.getxplList()
    },
    // 重置
    reset() {
      this.tableFrom1.page = 1
      this.tableFrom1.category_id = ''
      this.getxplList()
    },
    handleSizeChange1(val) {
      this.tableFrom1.limit = val
      this.getList('')
      console.log(val)
    },
    pageChange1(page) {
      this.tableFrom1.page = page
      this.getList('')
      console.log(page)
    },

    selectshop() {
      this.dialogTableVisible = true
      this.getxplList()
    },
    // 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 添加明细原因 row 当前行 column 当前列
    tabClick(row) {
      this.tabClickIndex = row.index
    },
    closeEdit() {
      this.tabClickIndex = null
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      const data = []
      this.multipleSelection.map((item) => {
        data.push(item.id)
      })
      this.service_ids = data
    },
    getSuccess() {
      this.getLstFilterApi()
      this.getList(1)
    },
    handleClose() {
      this.dialogLabel = false
    },
    handleFreightClose() {
      this.dialogFreight = false
    },
    // 添加淘宝服务成功
    onClose() {
      this.modals = false
    },
    handleRestore(id) {
      this.$modalSure('恢复服务').then(() => {
        restoreApi(id)
          .then(res => {
            this.$message.success(res.message)
            this.getLstFilterApi()
            this.getList('')
          })
          .catch(res => {
            this.$message.error(res.message)
          })
      })
    },
    // 平台分类；
    getCategoryList() {
      categoryListApi()
        .then(res => {
          this.categoryList = res.data
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 列表表头；
    getLstFilterApi() {
      lstFilterApi()
        .then(res => {
          this.headeNum = res.data
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 列表
    getList(num) {
      this.listLoading = true
      this.tableFrom.page = num || this.tableFrom.page
      serviceLstApi(this.tableFrom)
        .then(res => {
          this.tableData.data = res.data.list
          this.tableData.total = res.data.count
          this.listLoading = false
        })
        .catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
        })
      this.getLstFilterApi()
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    },
    // 删除
    handleDelete(id, idx) {
      this.$modalSure(this.tableFrom.type !== '4' ? '加入回收站' : '删除该服务').then(
        () => {
          this.tableFrom.type === '4'
            ? destoryApi(id)
              .then(({ message }) => {
                this.$message.success(message)
                this.getList('')
                this.getLstFilterApi()
              })
              .catch(({ message }) => {
                this.$message.error(message)
              })
            : serviceDeleteApi(id)
              .then(({ message }) => {
                this.$message.success(message)
                this.getList('')
                this.getLstFilterApi()
              })
              .catch(({ message }) => {
                this.$message.error(message)
              })
        }
      )
    },
    // 批量上架
    batchShelf() {
      if (this.multipleSelection.length === 0) return this.$message.warning('请先选择服务')
      const data = { status: 1, ids: this.service_ids }
      batchesOnOffApi(data).then(res => {
        this.$message.success(res.message)
        this.getLstFilterApi()
        this.getList('')
      })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 批量下架
    batchOff() {
      if (this.multipleSelection.length === 0) return this.$message.warning('请先选择服务')
      const data = { status: 0, ids: this.service_ids }
      batchesOnOffApi(data).then(res => {
        this.$message.success(res.message)
        this.getLstFilterApi()
        this.getList('')
      })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    onchangeIsShow(row) {
      statusApi(row.id, row.is_show)
        .then(({ message }) => {
          this.$message.success(message)
          this.getList('')
          this.getLstFilterApi()
        })
        .catch(({ message }) => {
          this.$message.error(message)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.merchantClass {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;

  .merchantCard {
    position: fixed;
    top: 30vh;
    left: 30vw;
    height: 40vh;
    width: 40vw;
  }
}

.bg {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.goods_detail .goods_detail_wrapper {
  z-index: -10;
}

/deep/ table.el-input__inner {
  padding: 0;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand1 {
  /deep/ label {
    color: #99a9bf;
  }
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}

.selWidth {
  width: 300px !important;
}

.seachTiele {
  line-height: 35px;
}
</style>
